{% extends 'base/base.html' %}


{% block title %}
  首页面
{% endblock %}

{% block link %}
  <link rel="stylesheet" href="../../static/css/news/index.css">
{% endblock %}


{% block main %}
<main id="main">
  <div class="w1200 clearfix">
{#      左边#}
      {% block main_contain %}
    <!-- main-contain start  -->
    <div class="main-contain">
      <!-- banner start -->
        <div class="banner">
            <ul class="pic">
                <!--淡入淡出banner-->


                <li><a href="javascript:void(0);"><img src="https://res.shiguangkey.com/file/202002/16/20200216170832672803801.png!mall_index_banner_a?x-oss-process=image/format,webp" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="../../static/images/youxi.png" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="../../static/images/dianshang.png" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="../../static/images/zimeiti.png" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="../../static/images/python_gui.jpg" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="../../static/images/linux.jpg" alt="test"></a></li>


            </ul>
            <a href="javascript:void(0);" class="btn prev">
                <i class="PyWhich py-arrow-left"></i></a>
            <a href="javascript:void(0);" class="btn next">
                <i class="PyWhich py-arrow-right"></i></a>
            <ul class="tab">
                <!-- 按钮数量必须和图片一致 -->


                <li></li>


                <li></li>


                <li></li>


                <li></li>


                <li></li>


                <li></li>


            </ul>
        </div>
      <!-- banner end -->

      <!-- content start -->
      <div class="content">
        <!-- recommend-news start -->
        <ul class="recommend-news">
        {% for n in ho %}
        <li>
            <a href="javascript:void(0)" target="_blank">
                <div class="recommend-thumbnail">
                    <img src="{{ n.news.image_url }}" alt="title">
                </div>
                <p class="info">{{ n.news.title }}</p>
            </a>
        </li>
       {% endfor %}
    </ul>


        <!-- recommend-news end -->

        <!--  news-nav start-->
          <nav class="news-nav">
              <ul class="clearfix">
{#                  <li class="active"><a href="javascript:void(0)">最新资讯</a></li>#}
                    <nav class="news-nav">
              <ul class="clearfix">
                  <li class="active"><a href="javascript:void(0)" data-id="0">最新资讯</a></li>
                  {% for news_tag in  tags %}
                    <li><a href="javascript:void(0)" data-id="{{ news_tag.id }}">{{ news_tag.name }}</a></li>
                  {% endfor %}
              </ul>
          </nav>
              </ul>
          </nav>
        <!--  news-nav end -->

        <!-- news-contain start -->
          <div class="news-contain">
              <ul class="news-list">

              </ul>
          </div>
        <!-- news-contain end -->

        <!-- btn-more start -->
        <a href="javascript:void(0);" class="btn-more">加载更多</a>
        <!-- btn-more end -->
      </div>
      <!-- content end -->
    </div>
    <!-- main-contain  end -->
        {% endblock %}
    {% block side %}
    <!-- side start -->
      <aside class="side">
          <div class="side-activities">
              <h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
              <div class="activities-img">
                  <a href="javascript:void(0);" target="_blank">
                      <img src="../../static/images/english.jpg" alt="title">
                  </a>
                  <p class="activities-tips">对话国外小姐姐</p>
              </div>
              <ul class="activities-list">
                  <li>
                      <a href="javascript:void(0);" target="_blank">
                          <span class="active-status active-start">报名中</span>
                          <span class="active-title"><a
                                  href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
                      </a>
                  </li>
                  <li>
                      <a href="javascript:void(0);" target="_blank">
                          <span class="active-status active-end">已结束</span>
                          <span class="active-title"><a
                                  href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
                      </a>
                  </li>
              </ul>
          </div>
          <div class="side-attention clearfix">
              <h3 class="attention-title">关注我</h3>
              <ul class="side-attention-address">
                  <li>
                      <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>蓝蓝</a>
                  </li>
                  <li>
                      <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
                                                                       style="color:rgb(0, 108, 226);"></i>蓝蓝</a>
                  </li>
                  <li>
                      <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
                                                                       style="color:rgb(245,92,110);"></i>蓝蓝</a>
                  </li>
              </ul>
              <div class="side-attention-qr">
                  <p>扫码关注</p>
              </div>
          </div>

          <div class="side-hot-recommend">
              <h3 class="hot-recommend">热门推荐</h3>
              <ul class="hot-news-list">

{#                  <li>#}
{#                      <a href="javascript:void(0)" class="hot-news-contain clearfix">#}
{#                          <div class="hot-news-thumbnail">#}
{#                              <img src="../../static/images/python_web.jpg"#}
{#                                   alt="">#}
{#                          </div>#}
{#                          <div class="hot-news-content">#}
{#                              <p class="hot-news-title">Django调试工具django-debug-toolbar安装使用教程</p>#}
{#                              <div class="hot-news-other clearfix">#}
{#                                  <span class="news-type">python框架</span>#}
{#                                  <!-- 自带的 -->#}
{#                                  <time class="news-pub-time">11月11日</time>#}
{#                                  <span class="news-author">python</span>#}
{#                              </div>#}
{#                          </div>#}
{#                      </a>#}
{#                  </li>#}
         {% for i in click_hot %}
                          <li>
                              <a href="javascript:void(0)" class="hot-news-contain clearfix">
                                  <div class="hot-news-thumbnail">
                                      <img src="{{ i.image_url }}"
                                           alt="">
                                  </div>
                                  <div class="hot-news-content">
                                      <p class="hot-news-title">{{ i.title }}</p>
                                      <div class="hot-news-other clearfix">
                                          <span class="news-type">{{ i.tag.name }}</span>
                                          <!-- 自带的 -->
                                          <time class="news-pub-time">{{ i.update_time|timeuntil  }}</time>
                                          <span class="news-author">{{ i.author.username }}</span>
                                      </div>
                                  </div>
                              </a>
                          </li>
                {% endfor %}

              </ul>
          </div>


      </aside>
    <!-- side end -->
        {% endblock %}
  </div>
</main>
{% endblock %}


{% block script %}
    <script src="../../static/js/news/index.js"></script>
{% endblock %}




